<template>
  <div class="slider-container">
    监听开关：<input type="checkbox" v-model="isListen" @change="toggle" />
    <el-carousel
      ref="carouselRef"
      :autoplay="false"
      indicator-position="outside"
    >
      <el-carousel-item v-for="item in images" :key="item">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { reactive, toRefs, ref, watch } from "vue";
import * as speechCommands from "@tensorflow-models/speech-commands";

const MODEL_PATH = "http://127.0.0.1:8080";

export default {
  setup: async function () {
    const carouselRef = ref();
    console.log(carouselRef);

    const state = reactive({
      images: [
        "https://cdn.pixabay.com/photo/2019/10/29/15/57/vancouver-4587302__480.jpg",
        "https://cdn.pixabay.com/photo/2019/10/31/07/14/coffee-4591159__480.jpg",
        "https://cdn.pixabay.com/photo/2019/11/01/11/08/landscape-4593909__480.jpg",
        "https://cdn.pixabay.com/photo/2019/11/02/21/45/maple-leaf-4597501__480.jpg",
        "https://cdn.pixabay.com/photo/2019/11/02/03/13/in-xinjiang-4595560__480.jpg",
        "https://cdn.pixabay.com/photo/2019/11/01/22/45/reschensee-4595385__480.jpg",
      ],
      current: '',
      isListen: false,
    });

    watch(
      () => state.current,
      () => {
        console.log(carouselRef.value);
        if(state.current === '上一张') {
          carouselRef.value && carouselRef.value.prev();
          return;
        }
        if(state.current === '下一张') {
          carouselRef.value && carouselRef.value.next();
          return;
        }
      }
    );

    const recognizer = speechCommands.create(
      "BROWSER_FFT",
      null,
      MODEL_PATH + "/speech/model.json",
      MODEL_PATH + "/speech/metadata.json"
    );
    await recognizer.ensureModelLoaded();
    const transferRecognizer = recognizer.createTransfer("轮播图");
    const res = await fetch(MODEL_PATH + "/slider/data.bin");
    const arrayBuffer = await res.arrayBuffer();
    transferRecognizer.loadExamples(arrayBuffer);
    await transferRecognizer.train({ epochs: 30 });
    console.log("done");

    //切换
    async function toggle() {
      if (state.isListen) {
        await transferRecognizer.listen(
          (result) => {
            const { scores } = result;
            const labels = transferRecognizer.wordLabels();
            const index = scores.indexOf(Math.max(...scores));
            const current = labels[index];
            state.current = current;
          },
          {
            overlapFactor: 0,
            probabilityThreshold: 0.8,
          }
        );
      } else {
        transferRecognizer.stopListening();
      }
    }

    return {
      ...toRefs(state),
      toggle,
    };
  },
};
</script>

<style lang="scss" scoped>
.speech-cn-container {
  button {
    margin-right: 10px;
  }
  .el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>